<template>
    <div>
        <el-card class="box-card">
            <!-- 头部区域 -->
            <template #header>
                <div class="header">
                    <span>班级信息管理</span>
                    <div class="extra">
                        <el-button type="primary" icon="el-icon-plus" @click="adddrawer = true">添加班级信息</el-button>
                    </div>
                </div>
            </template>
            <!-- 搜索表单 -->
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="班级名称：">
                    <el-input v-model="classSearch.classname" placeholder="班级名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="getclass">查询</el-button>
                    <el-button type="primary" icon="el-icon-refresh" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
            <!-- 班级列表 -->
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="classid" label="班级ID" width="250">
                </el-table-column>
                <el-table-column prop="classname" label="班级名称" width="400">
                </el-table-column>
                <el-table-column prop="remark" label="备注">
                </el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <!-- 修改抽屉 -->
                        <el-drawer title="班级信息修改" :visible.sync="updatedrawer" :direction="direction">
                            <el-form label-width="100px" :model="classModel" class="addform">
                                <el-form-item label="班级名称:">
                                    <el-input v-model="classModel.classname"></el-input>
                                </el-form-item>
                                <el-form-item label="备注:">
                                    <el-input v-model="classModel.remark"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button style="margin-left: 50px;" type="primary"
                                        @click="updateclass">修改</el-button>
                                    <el-button @click="updatereset">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </el-drawer>
                        <el-button slot="reference" type="primary" icon="el-icon-edit" size="small" circle
                            @click="updatedrawer = true, getClassByid(scope.row.classid)"></el-button>
                        <el-button slot="reference" type="danger" icon="el-icon-delete" size="small" circle
                            @click="handleDelete(scope.row.classid)"></el-button>
                    </template>
                </el-table-column>
                <template #empty>
                    <el-empty description="没有数据" />
                </template>
            </el-table>

            <!-- 分页条 -->
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="this.pageNum" :page-sizes="[3, 5, 10]" :page-size=this.pageSize
                    layout="total, sizes, prev, pager, next, jumper" :total=this.total>
                </el-pagination>
            </div>
            <!-- 添加抽屉 -->
            <el-drawer title="班级信息添加" :visible.sync="adddrawer" :direction="direction">
                <el-form label-width="100px" :model="classModel" class="addform">
                    <el-form-item label="班级名称:">
                        <el-input v-model="classModel.classname"></el-input>
                    </el-form-item>
                    <el-form-item label="备注:">
                        <el-input v-model="classModel.remark"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <template class="tem">
                            <el-button style="margin-left: 50px;" type="primary" @click="addclass">提交</el-button>
                            <el-button style="margin-left: 50px;" @click="addreset">重置</el-button>
                        </template>
                    </el-form-item>
                </el-form>
            </el-drawer>
        </el-card>
    </div>
</template>

<script>
import request from '@/utils/request'
export default {
    //数据
    data() {
        return {
            pageNum: 1,
            pageSize: 3,
            total: 10,
            adddrawer: false,
            updatedrawer: false,
            direction: 'rtl',
            classSearch: {
                classname: ''
            },

            tableData: [{
                classid: '',
                classname: '',
                remark: ''
            }
            ],
            classModel: {
                classid: '',
                classname: '',
                remark: ''
            },
        }
    },

    //方法
    methods: {
        //删除
        handleDelete(id) {
            console.log(id)

            this.$confirm('是否删除此班级?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                request.delete("/class/delete", {
                    params: {
                        id: id
                    }
                }).then(res => {
                    if (res.data.code == '0') {
                        this.$message.success("删除成功")
                        this.getclass()
                    } else {
                        this.$message.error("删除失败")
                    }
                }).catch(error => {
                    console.log(new error("服务异常"))
                    this.$message.error("服务异常")
                })
                
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
            
        },
    //分页方法
    handleSizeChange(pageSize) {
        this.pageSize = pageSize
        console.log(pageSize)
        this.getclass()
    },

    handleCurrentChange(pageNum) {
        this.pageNum = pageNum
        this.getclass()
        console.log(pageNum)
    },

    //清理数据模型
    cleanModel() {
        this.classModel.classid = '',
            this.classModel.classname = '',
            this.classModel.remark = ''
    },


    //添加方法
    addclass() {
        request.post("/class/addclass", this.classModel).then(res => {
            if (res.data.code == '0') {
                this.$message.success("添加成功")
                this.adddrawer = false
                this.getclass()
                this.cleanModel()
            } else {
                this.$message.error("添加失败");
            }
        }).catch(error => {
            console.log(new error("服务异常"))
            this.$message.error("服务异常")
        })
    },

    //获取班级信息
    getclass() {
        request.get("/class/findAll", {
            params: {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                classname: this.classSearch.classname
            }
        }).then(res => {
            if (res.data.code == '0') {
                this.$message.success("获取班级信息成功")
                this.tableData = res.data.data.list
                this.total = res.data.data.total
            } else {
                this.$message.error("获取班级信息失败")
            }
        }).catch(error => {
            console.log(new error("服务异常"))
            this.$message.error("服务异常")
        })
    },
    //通过id查找信息
    getClassByid(id) {
        request.get("/class/getByid", {
            params: {
                id: id
            }
        }).then(res => {
            if (res.data.code == '0') {
                this.classModel = res.data.data
            } else {
                this.$message.error("错误")
            }
        })

    },
    //修改
    updateclass() {
        request.put("/class/update", this.classModel).then(res => {
            if (res.data.code == '0') {
                this.$message.success("修改成功")
                this.updatedrawer = false
                this.getclass()
                this.cleanModel()
            } else {
                this.$message.error("修改失败")
            }
        })
    },
    reset() {
        this.classSearch.classname = ''
    },
    addreset() {
        this.classModel.classname = '',
            this.classModel.remark = ''
    },
    updatereset() {
        this.classModel.classname = '',
            this.classModel.remark = ''
    }


},

//初始化
created() {
    this.getclass()
}

}
</script>

<style lang="less" scoped>
/* 列表css */
.el-table .warning-row {
    background: rgb(166, 106, 100);
}

.el-table .success-row {
    background: #385e24;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.text {
    font-size: 20px;
}



.item {
    padding: 18px 0;
}

/* <!-- 班级信息列表 --> */
.el-table .warning-row {
    background: rgb(156, 136, 98);
}

.el-table .success-row {
    background: #f0f9eb;
}

.addform {
    .el-input {
        margin-left: 10px;
        width: 70%;
    }
}
</style>